<template>
  <el-tabs type="border-card" id="tab">
    <el-tab-pane>
      <span slot="label"><i class="el-icon-date"></i>用户信息</span>
      <el-col :span="24">
        <user/>
      </el-col>
    </el-tab-pane>
    <el-tab-pane label="用户角色">
      <users :list="list"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import User from '../components/User.vue'
  import Users from '../components/Users.vue'
  import axios from 'axios'
  import {mapState} from 'vuex'
  export default{
    name: 'UserInfo',
    components: {
      User,
      Users
    },
    data () {
      return {
        list: []
      }
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    mounted () {
      window.document.getElementById('tab').style.height = window.innerHeight - 110 + 'px'
      axios({
        method: 'get',
        url: `${this.BASE_URL}/roles/getOneRoles`,
        responseType: 'json',
        params: {
          account: sessionStorage.getItem('username')
        }
      }).then((response) => {
        this.list = response.data.data
      }).catch(() => {
        this.loading = false
      })
    }
  }
</script>
<style scoped>
  #tab {
    margin: 10px;
  }
  .el-form-item{
    display: flex;
  }
</style>
